<template>
  <div class="singer-album">
    <ul class="singer-videos">
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T002R300x300M0000042cH172YJ0mz.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="mod_cover__mask"></i>
          </div>
          <p>最伟大的作品</p>
          <div class="album-date">2022-07-15</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T002R300x300M0000009C3rp3Kfwg0.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="mod_cover__mask"></i>
          </div>
          <p>Mojito</p>
          <div class="album-date">2020-06-12</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T002R300x300M000001hGx1Z0so1YX.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="mod_cover__mask"></i>
          </div>
          <p>我是如此相信</p>
          <div class="album-date">2019-12-15</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T002R300x300M000004fXSyj3bWTMN.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="mod_cover__mask"></i>
          </div>
          <p>周杰伦地表最强世界巡回演唱会</p>
          <div class="album-date">2019-11-01</div>
        </div>
      </li>
      <li class="album-list">
        <div class="album-all">
          <div class="album-top">
            <img
              src="https://y.qq.com/music/photo_new/T002R300x300M000002gBTVk4JEE2T.jpg?max_age=2592000"
              alt="周杰伦"
            />
            <i class="mod_cover__mask"></i>
          </div>
          <p>说好不哭（with 五月天阿信）</p>
          <div class="album-date">2019-09-16</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SingerAlbum',
}
</script>

<script lang="ts" setup></script>

<style scoped>
.album-list {
  padding-bottom: 30px;
}
.album-list {
  display: inline-block;
  width: 20%;
}
.album-all {
  padding-right: 20px;
  font-size: 14px;
}
.album-all p {
  line-height: 23px;
}
.album-date {
  line-height: 22px;
  color: #999;
}
.album-top {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: 15px;
  cursor: pointer;
  overflow: hidden;


  
}
.album-top img {
  width: 100%;
  height: 100%;
  transition: all 0.8s;
}
.album-top i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  opacity: 0;
  background-image: url('../images/cover_play.56974e6f.png');
  transition: 0.3s;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;
  z-index: 999;
}

.album-top:hover i {
  opacity: 1;
  background-size: 76px 76px;
}
.album-top:hover img {
  transform: scale(1.07);
}
</style>
